<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- 	过滤器:
			定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
			语法:
				1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}}
				2.使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名
			备注:
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据,是产生新的对应的数据
		-->

		<div id="app">
			<!-- 计算属性 -->
			<p>{{fmtTime}}</p>
			<!-- methods -->
			<p>{{getFmtTime()}}</p>
			<!-- 过滤器 实现-->
			<p>{{time| timeFmtTime}}</p>
			<!-- 过滤器 实现(传参)-->
			<p>{{time| timeFmtTime("YYYY年MM月DD日")}}</p>
			<!-- 过滤器连用 -->
			<p>{{time| timeFmtTime("YYYY年MM月DD日")|myslice}}</p>
		</div>

		<div id="app2">
			<p>{{msg|myslice}}----{{msg}}</p>
		</div>
		<script src="../dayjs.min.js">
			//dayjs 处理时间的第三方库
		</script>
		<script src="../vue.js"></script>
		<script>
			//全局过滤器
			Vue.filter('myslice', function(value) {
				return value.slice(0, 4)
			})

			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						time: 1677501844734 //时间戳 
					}
				},
				//对象 方法
				methods: {
					getFmtTime() {
						return dayjs(this.time).format('YYYY-MM-DD HH-mm-ss')
					}
				},
				//计算属性 定义:要用的属性不存在，要通过已有属性计算得来
				computed: {
					fmtTime() {
						return dayjs(this.time).format('YYYY-MM-DD HH-mm-ss')
					}
				},
				//局部 过滤器
				filters: {
					timeFmtTime(value, str = "YYYY/MM/DD HH:mm:ss") {
						return dayjs(value).format(str)
					},
				}
			});

			var app = new Vue({
				el: '#app2', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						msg: "你好呀啦啦啦"
					}
				},
			});
			
		</script>
	</body>
</html>
